<template>
	<div class="app-container">
		<el-form :inline="true" :model="formInline" class="demo-form-inline">
			<el-form-item label="类型名称">
				<el-input v-model="formInline.lxmc" placeholder="类型名称"></el-input>
			</el-form-item>
			<el-form-item label="父级编号">
				<el-input v-model="formInline.lxpri" placeholder="父级编号"></el-input>
			</el-form-item>
			<el-form-item label="选用标识">
				<el-select v-model="formInline.xybz" placeholder="选用标识">
					<el-option label="全部" value=""></el-option>
					<el-option label="启用" value="Y"></el-option>
					<el-option label="禁用" value="N"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="onSubmit">查询</el-button>
			</el-form-item>
		</el-form>
		
		<el-button type="primary" >
			<router-link to="dictLxEdit">添加类型</router-link>
		</el-button>
		
		<el-table :data="tableData.filter(data => !search || data.lxmc.toLowerCase().includes(search.toLowerCase()))" style="width: 100%">
			<el-table-column label="类型编号" prop="lxid" width="100">
			</el-table-column>
			<el-table-column label="类型名称" prop="lxmc">
			</el-table-column>
			<el-table-column label="父级编号" prop="lxpri" width="120">
			</el-table-column>
			<el-table-column label="类型备注" prop="lxbz">
			</el-table-column>
			<el-table-column label="选用标识" prop="xybz">
			</el-table-column>
			
			<el-table-column label="类型添加">
				<template  slot-scope="scope">
					<el-button size="mini" type="success"  @click="addBrother(scope.row)">添加同级</el-button>
					<el-button size="mini" type="warning"  @click="addChildren(scope.row)">添加子级</el-button>
				</template>
			</el-table-column>
			
			<el-table-column align="right">
				<template slot="header" slot-scope="scope">
					<el-input v-model="search" size="mini" placeholder="输入关键字搜索" />
				</template>
				<template slot-scope="scope">
					
					<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
					<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">
						<span v-if='scope.row.xybz=="Y"'>禁用</span>
						<span v-if='scope.row.xybz=="N"'>启用</span>
					</el-button>
				</template>
			</el-table-column>

		</el-table>
		<div class="block">
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" @prev-click="prevClick" @next-click="nextClick" :current-page="currentPage" :page-sizes="[5, 10, 20, 50]" :page-size="5" layout="total, sizes, prev, pager, next, jumper" :total="total">
			</el-pagination>
		</div>

		<el-drawer title="字典类型修改" :visible.sync="drawer" :direction="direction" :before-close="handleClose" size="40%">

			<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="90px" size="small " class="demo-ruleForm">
				<el-form-item label="类型编号" prop="lxid">
					<el-input v-model="ruleForm.lxid" :disabled="true"></el-input>
				</el-form-item>

				<el-form-item label="类型名称" prop="lxmc">
					<el-input v-model="ruleForm.lxmc"></el-input>
				</el-form-item>

				<el-form-item label="父级类型" prop="lxpri">
					<el-input v-model="ruleForm.lxpri" :disabled="true"></el-input>
				</el-form-item>

				<el-form-item label="类型备注" prop="lxbz">
					<el-input type="textarea" v-model="ruleForm.lxbz"></el-input>
				</el-form-item>

				<el-form-item label="选用标志" prop="xybz">
					<el-radio-group v-model="ruleForm.xybz">
						<el-radio label="Y">启用</el-radio>
						<el-radio label="N">禁用</el-radio>
					</el-radio-group>
				</el-form-item>

				<el-form-item>
					<el-button type="primary" @click="submitForm('ruleForm')">确认</el-button>
					<el-button @click="resetForm('ruleForm')">取消</el-button>
				</el-form-item>
			</el-form>

		</el-drawer>

	</div>
</template>

<script>
	import { getList } from '@/api/table'

	export default {
		filters: {

		},
		data() {
			return {
				loadingMsg: '',
				tableData: [{}],
				search: '',
				currentPage: 1,
				pageNo: 1,
				pageSize: 5,
				total: 65,
				formInline: {
					lxmc: '',
					lxpri: 0,
					xybz: ''
				},
				drawer: false,
				direction: 'ltr',
				ruleForm: {
					lxid: '',
					lxmc: '',
					lxpri: '',
					lxbz: '',
					xybz: ''
				},
				rules: {
					lxmc: [{
							required: true,
							message: '请输入类型名称',
							trigger: 'blur'
						},
						{
							min: 2,
							max: 5,
							message: '长度在2 到 5 个字符',
							trigger: 'blur'
						}
					],
					xybz: [{
						required: true,
						message: '请选择是否启用',
						trigger: 'change'
					}],
					lxbz: [{
						required: true,
						message: '请填写类型备注',
						trigger: 'blur'
					}]
				}
			}
		},
		created() {

		},
		methods: {
			loadingInfo() {
				this.loadingMsg = this.$loading({
					lock: true,
					text: 'Loading',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});
			},
			queryDictLxPage(_lxmc, _lxpri, _xybz, _pageNo, _pageSize) {
				this.loadingInfo();
				this.$axios.get('/feign/getPageListByCondition', {
						params: {
							lxmc: _lxmc,
							lxpri: _lxpri,
							xybz: _xybz,
							pageNo: _pageNo,
							pageSize: _pageSize
						}
					})
					.then((res) => {
						this.loadingMsg.close();
						console.log('data==>', res.data.data.list);
						this.tableData = res.data.data.list;
						this.total = res.data.data.count;
					})
					.catch((error) => {
						console.log(error);
						//alert("对不起，远程资源链接请求失败，请稍后重试，或联系管理员！");
						this.$message.error('对不起，远程资源链接请求失败，请稍后重试或联系管理员！');
						this.loadingMsg.close();
					})
			},
			handleEdit(index, row) {
				console.log(index, row);
				//this.$router.push({ name: 'dictLxEdit', params: { lxid: row.lxid }});
				this.loadingInfo();
				this.$axios.get('/feign/queryOneById', {
						params: {
							lxid: row.lxid
						}
					})
					.then((res) => {
						this.loadingMsg.close();
						console.log('data==>', res.data.data);
						if(res.data.code) {
							let dictlx = res.data.data;
							this.ruleForm.lxid = dictlx.lxid;
							this.ruleForm.lxmc = dictlx.lxmc;
							this.ruleForm.lxpri = dictlx.lxpri;
							this.ruleForm.lxbz = dictlx.lxbz;
							this.ruleForm.xybz = dictlx.xybz;
						}
						this.drawer = true;
					})
					.catch((error) => {
						console.log(error);
						//alert("对不起，远程资源链接请求失败，请稍后重试，或联系管理员！");
						this.$message.error('对不起，远程资源链接请求失败，请稍后重试或联系管理员！');
						this.loadingMsg.close();
					})

			},
			handleDelete(index, row) {
				console.log(index, row.lxid);

				this.$confirm('此操作将更改类型名称为' + row.lxmc + '的应用状态, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.loadingInfo();
					this.$axios.post('/feign/delete', {
							xybz: row.xybz,
							lxid: row.lxid
						})
						.then((res) => {
							this.loadingMsg.close();
							if(res.data.code == 200) {
								this.$message({
									type: 'success',
									message: '操作成功!'
								});
								this.currentPage=this.pageNo;
								this.queryDictLxPage(this.formInline.lxmc, this.formInline.lxpri, this.formInline.xybz, this.pageNo, this.pageSize);
							} else {
								this.$message({
									type: 'error',
									message: '操作失败!'
								});
							}
						})
						.catch((error) => {
							console.log(error);
							//alert("对不起，远程资源链接请求失败，请稍后重试，或联系管理员！");
							this.$message.error('对不起，远程资源链接请求失败，请稍后重试或联系管理员！');
							this.loadingMsg.close();
						})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
				//alert(`每页 ${val} 条`);
				this.pageSize = val;
				this.queryDictLxPage(this.formInline.lxmc, this.formInline.lxpri, this.formInline.xybz, this.pageNo, val);
			},
			handleCurrentChange(val) {
				//console.log(`当前页: ${val}`);
				//alert(`当前页: ${val}`);
				this.pageNo=val;
				this.queryDictLxPage(this.formInline.lxmc, this.formInline.lxpri, this.formInline.xybz, val, this.pageSize);
			},
			prevClick(val) {
				//alert("上一页"+val);
				this.queryDictLxPage(this.formInline.lxmc, this.formInline.lxpri, this.formInline.xybz, val, this.pageSize);
			},
			nextClick(val) {
				//alert("下一页"+val);
				this.queryDictLxPage(this.formInline.lxmc, this.formInline.lxpri, this.formInline.xybz, this.xybz, val, this.pageSize);
			},
			onSubmit() {
				//alert('submit!');
				//alert(this.formInline.lxmc+":"+this.formInline.lxpri+":"+this.formInline.xybz);
				this.queryDictLxPage(this.formInline.lxmc, this.formInline.lxpri, this.formInline.xybz, this.pageNo, this.pageSize);
			},
			handleClose(done) {
				this.$confirm('确认关闭？')
					.then(_ => {
						done();
					})
					.catch(_ => {});
			},
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if(valid) {
						this.$confirm('是否确认当前操作?', '提示', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							type: 'warning'
						}).then(() => {
						
							this.loadingInfo();
							this.$axios.post('/feign/update',
									this.ruleForm
								)
								.then((res) => {
									this.loadingMsg.close();
									if(res.data.code == 200) {
										this.$message({
											type: 'success',
											message: '操作成功!'
										});
										this.drawer = false;
										this.currentPage=this.pageNo;
										this.queryDictLxPage(this.formInline.lxmc, this.formInline.lxpri, this.formInline.xybz, this.pageNo, this.pageSize);
									} else {
										this.$message({
											type: 'error',
											message: '操作失败!'
										});
									}
								})
								.catch((error) => {
									console.log(error);
									//alert("对不起，远程资源链接请求失败，请稍后重试，或联系管理员！");
									this.$message.error('对不起，远程资源链接请求失败，请稍后重试或联系管理员！');
									this.loadingMsg.close();
								})
						}).catch(() => {
							this.loadingMsg.close();
							this.$message({
								type: 'info',
								message: '已取消'
							});
						});
					} else {
						this.loadingMsg.close();
						console.log('error submit!!');
						return false;
					}
				});
			},
			resetForm(formName) {
				this.$refs[formName].resetFields();
			},
			addBrother(row){
				 this.$router.push({ name: 'dictLxEdit', params: { lxpri: row.lxpri }});
			},
			addChildren(row){
				 this.$router.push({ name: 'dictLxEdit', params: { lxid: row.lxid }});
			}
		},
		mounted() {
			this.queryDictLxPage(this.formInline.lxmc, this.formInline.lxpri, this.formInline.xybz, this.pageNo, this.pageSize);
		}
	}
</script>

<style scoped="scoped">
	.el-pagination {
		text-align: center;
		margin: 20px auto;
	}
	
	.el-form {
		width: 80%;
		margin: 0 auto;
	}
</style>